<!--角色管理-->
<template>
    <div>
      <div style="margin-bottom: 15px;">
        <el-button
        size="mini"
        type="primary"
        @click="handleAdd">添加角色</el-button>
      </div>
      <div>
        <div style="width: 70%;float: left">
          <el-table :data="groupList" stripe border>
            <el-table-column prop="gr_id" label="id" align="center" width="80px"></el-table-column>
            <el-table-column prop="gr_name" label="角色名称" align="center" min-width="100px"></el-table-column>
            <el-table-column prop="gr_info" label="角色描述" align="center" min-width="200px"></el-table-column>
            <el-table-column label="操作" min-width="180px" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                <el-button
                  size="mini"
                  type="primary"
                  @click="handleAddAction(scope.$index, scope.row)">权限分配</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="width: 28%;height:585px;float: left;margin-left: 1%">
          <el-card class="box-card" style="height: 585px;">
            <div slot="header" class="clearfix" style="height: 28px;">
              <span style="line-height: 28px;">权限分配</span>
              <span style="line-height: 28px;">/</span>
              <span style="line-height: 28px;color: green">{{groupName}}</span>
            </div>
            <div style="height: 500px;overflow-y:scroll;">
              <el-tree
                :data="actionData"
                show-checkbox
                node-key="id"
                :default-expand-all="expand_all"
                :default-expanded-keys="[]"
                :default-checked-keys="checkedIndex"
                :props="defaultProps"
                @check="isCheck">
              </el-tree>
            </div>
          </el-card>
        </div>
      </div>

    <!--添加角色-->
    <add-group-dialog v-if="isAddGroup" :isAddGroup="isAddGroup" @closeDialog="handleCloseDialog"></add-group-dialog>
    <!--编辑角色-->
      <edit-group-dialog v-if="isEditGroup" :isEditGroup="isEditGroup" :groupData="groupData" @closeDialog="handleCloseDialog"></edit-group-dialog>
    </div>
</template>
<script>
  import addGroupDialog from './component/addGroup.vue'
  import editGroupDialog from './component/editGroup.vue'
  import {getAllGroup,deleteGroup,findActionTreeByGrId,addGroupAction,deleteGroupAction} from '@/api/permission'
  export default{
      components:{
        addGroupDialog,
        editGroupDialog,
      },
      data(){
          return {
             groupList:null,
             isAddGroup:false,
             isEditGroup:false,
             groupData:{
                 gr_name:"",
                 gr_info:""
             },
            actionData:[],
            defaultProps: {
              children: 'children',
              label: 'label'
            },
            expand_all:true,
            checkedIndex:[],
            group_id:0, //对应的角色id
            groupName:""
          }
      },

      mounted(){
       this.getAllGroupData();
      },

      methods:{

        //获取所有角色信息
        getAllGroupData(){
          //获取所有角色信息
          getAllGroup().then(res=>{
            if(res.code == 200){
              this.groupList = res.data;
              if(this.groupList.length > 0){
                  this.handleAddAction(0,this.groupList[0]);
              }
            }
          })
        },

        //编辑
        handleEdit(index,row){
           this.groupData = row;
           this.isEditGroup = true;
        },

        //添加角色
        handleAdd(){
          this.isAddGroup = true;
        },
        //删除
        handleDelete(index,row){
          this.$confirm('是否删除该角色?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            deleteGroup(row).then(res=>{
              if(res.code == 200){
                this.$message({
                  message: '删除成功',
                  type: 'success'
                });
                this.getAllGroupData();
              }else if(res.code == 300){
                this.$message({
                  message: '该角色下面存在用户，不能进行删除',
                  type: 'warning'
                });
              }
            })
          }).catch(() => {

          });
        },

        //权限分配
        handleAddAction(index,row){
          this.group_id = row.gr_id;
          this.groupName = row.gr_name;
           //获取指定角色下面的权限树
          findActionTreeByGrId(row).then(res=>{
              if(res.code == 200){
                  this.actionData = [];
                  this.checkedIndex = [];
                  console.log(res.data);
                  for(let i = 0;i < res.data.length;i ++){
                      let obj = {};
                      obj.id = res.data[i].action_id;
                      obj.label = res.data[i].action_name;
                      if(res.data[i].url == null || res.data[i].url.trim().length == 0){
                          obj.disabled = true;
                          obj.children = [];
                          for(let j = 0;j < res.data[i].list.length;j ++){
                              let childrenObj = {};
                              childrenObj.id = res.data[i].list[j].action_id;
                              childrenObj.label = res.data[i].list[j].action_name;
                              if(res.data[i].list[j].have){
                                  this.checkedIndex.push(childrenObj.id)
                              }
                              obj.children.push(childrenObj)
                          }
                      }else{
                          if(res.data[i].have){
                            this.checkedIndex.push(obj.id)
                          }
                      }
                      this.actionData.push(obj)
                  }

              }
          });
        },

        //当节点被点击时触发
        isCheck(nodeObj,statusObj){
            if(statusObj.checkedKeys.includes(nodeObj.id)){
                //调用后台接口添加权限
                addGroupAction({gr_id:this.group_id,action_id:nodeObj.id}).then(res=>{
                    if(res.code == 200){
                      this.$message({
                        message: '添加成功',
                        type: 'success'
                      });
                    }
                });

            }else{
               //调用后台接口删除权限
                deleteGroupAction({gr_id:this.group_id,action_id:nodeObj.id}).then(res=>{
                    if(res.code == 200){
                      this.$message({
                        message: '取消成功',
                        type: 'success'
                      });
                    }
                });
            }
        },
        //关闭对话框
        handleCloseDialog(type){
            if(type == "add"){
              this.isAddGroup = false;
            }else if(type == "edit"){
                this.isEditGroup = false;
            }else if(type == "action"){
                this.isAddAction = false;
            }
            this.getAllGroupData();
        }

      }
  }
</script>
<style scoped>

</style>
